<template>
  <view>
    <view class="header-tab" :style="{paddingTop: (useAppData.titleHeight+3) + 'px'}">
      <view class="header-item" @tap="gotoChat">对话</view>
      <view class="header-item header-item-active">跑团</view>
      <view @tap="gotoMe">我的</view>
    </view>
    <view class="group-index">
      <view class="group-item super-group">
        <view class="group-header super-header">
          <image class="title" src="../static/super-title.png"></image>
        </view>
        <view class="participate-in super-in">
          <view>
            <text>去参加</text>
            <image src="../static/entity-arrow.png"></image>
          </view>
        </view>
        <view class="participate-btn" @tap="gotoGroupInfo(0)"></view>
        <view class="group-con super-con">
          <view class="activity-txt">
            {{superGroupDesc}}
          </view>
          <Ranking ref="rankRefSuper" :isOnlyTop="state.isOnlyTop" @thumsUpCallBack="onGetGroupRankData"></Ranking>
        </view>
      </view>
      <view class="group-item family-group">
        <view class="group-header family-header">
          <image class="title" src="../static/family-title.png"></image>
          <image class="recommend" src="../static/qianglituijian.png"></image>
        </view>
        <view class="participate-in family-in">
          <view>
            <text>去参加</text>
            <image src="../static/entity-arrow.png"></image>
          </view>
        </view>
        <view class="participate-btn" @tap="gotoGroupInfo(1)"></view>
        <view class="group-con family-con">
          <view class="activity-txt">
            {{familyGroupDesc}}
          </view>
          <Ranking ref="rankRefFamily" :isOnlyTop="state.isOnlyTop" @thumsUpCallBack="onGetGroupRankData"></Ranking>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onLaunch, onLoad, onShow, onHide, onUnload, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
  import { ref, reactive, onMounted, nextTick } from 'vue';
  import Ranking from "../components/ranking.vue"
  import * as API from "../../api/api"
  import { getTime, checkUserInfo } from "../../utils/util"
  import { storeToRefs } from "pinia";
  import { useGroupStore } from "../../store/group";
  import { useAppStore } from "../../store/app";
	import { useShareStore } from "../../store/share";
	import { userLoginStore } from "../../store/userLogin"
  import { useRunInfoStore } from "../../store/runInfo"
  const useShareData = useShareStore()
  const useAppData = useAppStore()
	const useGroupData = useGroupStore()
	const userLoginData = userLoginStore()
  const useRunInfoData = useRunInfoStore()
	const rankRefFamily = ref(null)
  const rankRefSuper = ref(null)
  const { superGroupDesc, familyGroupDesc} = storeToRefs(useRunInfoData)
  const state = reactive({
    isOnlyTop: true,
		token: null,
		userInfo: null,
  })

  const gotoGroupInfo = (type) => {
    uni.navigateTo({
		  url: `/runGroupPages/group/groupInfo?groupType=${type}`
		});
    useGroupData.setGroupType(type)
  }

  const gotoMe = () => {
    uni.reLaunch({
      url: "/pages/me/me",
    });
  }

  const gotoChat = (url) => {
    uni.reLaunch({
      url: "/pages/chat/chat"
    });
  }

	const onGetGroupRankData = () => {
		nextTick(() => {
      rankRefSuper?.value?.onGetGroupRank(0)
			rankRefFamily?.value?.onGetGroupRank(1)
		})
	}


  onLoad((options) => {
    useRunInfoData.getConfigList()
  })

  onShow(() => {
		state.userInfo = uni.getStorageSync("userInfo") ? JSON.parse(uni.getStorageSync("userInfo")) : null
		state.token = uni.getStorageSync("token") ? uni.getStorageSync("token") : null
		if (state.token) {
			useGroupData.onGetGroupInfo().then(res => {
				onGetGroupRankData()
			})
		} else {
			onGetGroupRankData()
		}
  })
</script>

<style lang="scss" scoped>
  .group-index{
    padding: 10rpx 32rpx;
    box-sizing: border-box;
    .group-item{
      width: 688rpx;
      // height: 620rpx;
      position: relative;
      margin-top: 32rpx;
    }
    .super-group{
    }
    .family-group{

    }
    .group-header{
      width: 100%;
      height: 120rpx;
      position: relative;
      z-index: 2;
      font-family: FZZYJW--GB1, FZZYJW--GB1;
      font-weight: 800;
      font-size: 44rpx;
      .title{
        width: 276rpx;
        height: 44rpx;
        padding: 30rpx 24rpx;
      }
      .recommend{
        width: 132rpx;
        height: 44rpx;
      }
    }
    .super-header{
      color: #26415C;
      background: url("https://model-capability.oss-cn-beijing.aliyuncs.com/pro/healthRun/super-group.png") 0 0 no-repeat;
      background-size: 100% 100%;
    }
    .family-header{
      background: url("https://model-capability.oss-cn-beijing.aliyuncs.com/pro/healthRun/family-group.png") 0 0 no-repeat;
      background-size: 100% 100%;
      color: #4F2A0F;
      display: flex;
      align-items: center;
    }
    .participate-in{
      width: 236rpx;
      height: 92rpx;
      background-size: 100% 100%;
      font-weight: 500;
      font-size: 28rpx;
      color: #222222;
      position: absolute;
      right: 0;
      top: 15rpx;
      z-index: 1;
      view{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 15rpx;
      }
      text{
        padding-left: 15rpx;
      }
      image{
        width: 12rpx;
        height: 14rpx;
        margin-left: 20rpx;
      }
    }
    .participate-btn{
      width: 236rpx;
      height: 92rpx;
      position: absolute;
      right: 0;
      top: 15rpx;
      z-index: 5;
    }
    .super-in{
      background: url("https://model-capability.oss-cn-beijing.aliyuncs.com/pro/healthRun/super-in.png") 0 0 no-repeat;
      background-size: 100% 100%;
    }
    .family-in{
      background: url("https://model-capability.oss-cn-beijing.aliyuncs.com/pro/healthRun/family-in.png") 0 0 no-repeat;
      background-size: 100% 100%;
    }
    .activity-txt{
      font-size: 32rpx;
      color: rgba(34,34,34,0.8);
      // display: -webkit-box;
      // -webkit-box-orient: vertical;
      // -webkit-line-clamp: 3;
      // overflow: hidden;
      // text-overflow: ellipsis;
    }
    .group-con{
      padding: 10rpx 24rpx;
      box-sizing: border-box;
      height: calc(100% - 120rpx);
      margin-top: -24rpx;
      position: relative;
      z-index: 2;
    }
    .super-con {
      background: linear-gradient( 180deg, #E5FEFF 0%, #F5FBFC 100%);
    }
    .family-con {
      background: linear-gradient( 180deg, #FEF4DF 0%, #FCFAF5 100%);
    }
  }
</style>
